<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-image: url("./pic1.jpeg");
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            top: 0px;
            left: 200px;

            



            /* transform: none; */
            /* 默认值：none */

            transform: rotate(-45deg);
            transform: rotate(0.25turn);
            /* 
                填一个角度值，取值负无穷到正无穷
                正值顺时针，负值反向旋转
                围绕旋转中心旋转
            */


            transform-origin: center center;
            /* transform-origin: 100px 0; */
            /* transform-origin: 0 0; */
            /* transform-origin: -100px 0; */
            /* 
                可以影响多个属性值，不只rotate
                这个设置是transform多个属性值共用的

                默认值： center center  div的中心
                还可以设置为 left top right bottom
                0 0  div的左上角

                设置的是变换的中心，给谁设置，参照的就是谁，比如这里参照的这个div的边框盒
                注意：不是速写属性，只可以上面一种写法
                还可以设置负数，即中心跑到了div的外面，但还是参照的div本身
                z轴垂直屏幕指向用户，所以transform-origin设置两个值
            */


            transform: rotateX(0deg);
            /* 
             坐标系：浏览器的坐标系统（browser coordinate system）
             是笛卡尔坐标系，又叫直角坐标系
             x轴：从左到右   y轴：从上到下   z轴：垂直屏幕朝用户方向
             原点就是设置的变换中心
            
             沿x轴旋转（三维旋转），填一个角度，范围仍然负无穷到正无穷，可以负值
            */

            transform: rotateY(0deg);
            /*  
              沿y轴旋转，类似x轴的
            */

            transform: rotateZ(0deg);
            /* 
              沿着z轴旋转（三维的），目前表现和二维的rotate类似
             */


            /* 三维旋转的组合 注意要空格隔开 不能写两个transform，会覆盖*/
            transform: rotateZ(90deg) rotateY(90deg);
            transform: rotateY(90deg) rotateZ(90deg);
            /* 这两者不一样的结果 */

            transform: rotateX(0deg) rotateY(0deg);
            /* 
             元素在旋转之后，它所参照的坐标轴也会跟着旋转
             也就是轴也进行了旋转

             所以三维旋转的组合，顺序很重要，变换顺序很可能得到不一样的结果

             注意，变换顺序是：
             先x45度在y90度 -----> 先y90度在x45度
             先x45度在y90度 -----> 先y45度在x90度（这不叫换顺序）
            */


            /* transform: rotate3d(x, y, z, angle); */
            transform: rotate3d(1, 0, 0, 45deg);
            transform: rotate3d(-1, 0, 0, 45deg);
            /* 
              沿空间矢量旋转，由坐标原点到点（1,0,0）的矢量
              矢量的大小不重要，重要的是方向，方向代表旋转轴
              矢量方向相反，会导致旋转方向相反，上面例子两者不一样
              注意，即使是在三维空间沿空间轴旋转，整个div仍然是一个平面
            */
        }

        body {
            /* 下面两个属性注意，为了看3d的旋转，先介绍一下 */
            /* 加一个3d空间的视角，把元素看成三维空间的，看上去有立体效果，后面还会讲 */
            /* 必须在父级加，在body加比较好 */
            /* 可以认为设置一双眼睛，展示在屏幕上的其实是投影，3d视图 */

            perspective: 800px;
            /* 相当于视角离屏幕的距离 */

            /* perspective-origin: center center; */
            perspective-origin: 300px 100px;
            /* 默认值 center center*/
            /* 视角位置不同，样子，呈现效果也会不相同 */
            /* 设置视角的位置，值和transform-origin一样*/
            /* 设置在正上方比较好，凝视她 */

            transform-style: preserve-3d;
            /* 增强3d的堆叠层，3d效果更明显，仍在父级设置 */
            /* 之前是在平面上渲染，现在是在堆叠层 */
        }


    </style>

</head>
<body>
    <div></div>
</body>
</html>